<template>
    供应商
    <!-- 搜索表 -->
    <el-form :inline="true" :model="formInline" class="w-full h-10">
        <el-form-item label="名称">
            <el-input v-model="formInline.manufacturer" placeholder="姓名" />
        </el-form-item>
        <el-form-item label="联系人">
            <el-input v-model="formInline.name" placeholder="姓名" />
        </el-form-item>
        <el-form-item label="电话">
            <el-input v-model="formInline.mobile" placeholder="电话" />
        </el-form-item>
        
        <el-form-item>
            <el-button type="primary" @click="onSearch">搜索</el-button>
        </el-form-item>
    </el-form>
    <el-button type="primary" @click="addOne(0)">添加</el-button>
    <el-button type="danger" @click="delMore">批量删除</el-button>
    <div class="w-full">
        <!-- 表格显示 -->
        <el-table :data="tableData" style="width: 100%" border height="60vh" highlight-current-row @row-dblclick="getInfo" @selection-change="selected">
            <el-table-column fixed type="selection" width="50" />
            <el-table-column prop="id" label="序号" width="80" align="center"></el-table-column>
            <el-table-column prop="manufacturer" label="名称"  align="center"></el-table-column>
            <el-table-column prop="name" label="联系人"  align="center"></el-table-column>
            <el-table-column prop="mobile" label="电话"  align="center"></el-table-column>
            <el-table-column prop="place" label="地址"  align="center"></el-table-column>
            <el-table-column prop="remark" label="备注"  align="center"></el-table-column>
            <el-table-column prop="createTime" label="创建时间"  align="center"></el-table-column>
            <el-table-column prop="createName" label="创建人"  align="center"></el-table-column>
            <el-table-column prop="updateTime" label="更新时间"  align="center"></el-table-column>
            <el-table-column prop="updateName" label="更新人"  align="center"></el-table-column>
            <!-- <el-table-column prop="panduan" label="状态"  align="center">
                <template #default="scope">
                    <el-tag v-if="scope.row.panduan == '1'" type="success">启用</el-tag>
                    <el-tag v-else type="danger">禁用</el-tag>
                </template>
            </el-table-column> -->
            <el-table-column label="操作"  align="center" width="200">
                <template #default="scope">
                    <el-button type="primary" @click="addOne(scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 页码 -->
    <div class="flex justify-center items-end w-full h-16 mt-2">
        <el-pagination
            v-model:current-page="pageForm.currentPage"
            v-model:page-size="pageForm.pageSize"
            :page-sizes="[10, 20, 30, 40]"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageForm.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            />
            <el-switch v-model="background" class="ml-2" />
    </div>
    <!-- 进行编辑添加 -->
    <el-dialog v-model="dialogFormVisible" title="操作" width="300">
        <el-form :model="addEditForm" label-width="80px">
            <el-form-item label="名称">
                <el-input v-model="addEditForm.manufacturer" placeholder="名称" />
            </el-form-item>
            <el-form-item label="联系人">
                <el-input v-model="addEditForm.name" placeholder="联系人" />
            </el-form-item>
            <el-form-item label="电话">
                <el-input v-model="addEditForm.mobile" placeholder="电话" />
            </el-form-item>
            <el-form-item label="地址">
                <el-input v-model="addEditForm.place" placeholder="地址" />
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="addEditForm.remark" placeholder="备注" />
            </el-form-item>
            <!-- <el-form-item label="状态">
                <el-select v-model="addEditForm.panduan" placeholder="状态">
                    <el-option label="启用" value="1" />
                    <el-option label="禁用" value="0" />
                </el-select>
            </el-form-item> -->
            <el-form-item>
                <el-button type="primary" @click="addEdit">确定</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!-- 进行查看详情 -->
    <el-dialog v-model="dialogInfoVisible" title="用户详情" width="300">
        <el-form :model="addEditForm" label-width="80px">
            <el-form-item label="名称">
                <el-text >{{ addEditForm.manufacturer }}</el-text>
            </el-form-item>
            <el-form-item label="联系人">
                <el-text >{{ addEditForm.name }}</el-text>
            </el-form-item>
            <el-form-item label="电话">
                <el-text >{{ addEditForm.mobile }}</el-text>
            </el-form-item>
            <el-form-item label="地址">
                <el-text >{{ addEditForm.place }}</el-text>
            </el-form-item>
            <el-form-item label="备注">
                <el-text >{{ addEditForm.remark }}</el-text>
            </el-form-item>
            <!-- <el-form-item label="状态">
                <template #default="scope">
                    <el-tag v-if="scope.row.panduan == 1" type="success">启用</el-tag>
                    <el-tag v-else type="danger">禁用</el-tag>
                </template>
            </el-form-item> -->
        </el-form>
    </el-dialog>

</template>

<script setup>
import { ref, reactive, computed} from "vue";
import { ElMessageBox, ElMessage } from 'element-plus'
import { getList, add, del, edit } from "@/api/user/supplier.js"
// 表数据区
let tableData = reactive([
    {id : 1, manufacturer: "张三", name: "张三", phone: "123456789", place: "深圳", remark: "备注", createTime: "2022-01-01", creater: "张三", updateTime: "2022-01-01", updater: "张三", status: 1},
    {id : 2, manufacturer: "李四", name: "李四", phone: "123456789", place: "深圳", remark: "备注", createTime: "2022-01-01", creater: "李四", updateTime: "2022-01-01", updater: "李四", status: 1},
    {id : 3, manufacturer: "王五", name: "王五", phone: "123456789", place: "深圳", remark: "备注", createTime: "2022-01-01", creater: "王五", updateTime: "2022-01-01", updater: "王五", status: 1}    
])
// 添加编辑
const dialogFormVisible = ref(false)
// 详情
const dialogInfoVisible = ref(false)
// 搜索表
const formInline = reactive({
    manufacturer: "",
    name:"",
    mobile:"",
})
// 页数
const pageForm = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 50
})
// 背景
const background = ref(false)
// 搜索条件
const pageSearch = computed(() => {
  return {
    page: pageForm.currentPage,
    limit: pageForm.pageSize,
    manufacturer: formInline.manufacturer,
    name: formInline.name,
    mobile: formInline.mobile
  }
})
// 编辑或者添加
var addEditForm = reactive({
    id:"",
    manufacturer: "",
    name: "",
    description: "",
    mobile : "",
    place: "",
    remark: "",
    panduan: "1"
})
// 选择复选框
let idArr = []
const selected = (data) => {
  idArr = []
  data.forEach((value) => {
    idArr.push(value.id)
  })
}
initData()
// 初始化方法
function initData(){
    getList(pageSearch.value).then(res =>{
        console.log(res)
        // 初始化表格数据
        tableData = reactive(res.data.list)
        pageForm.total = res.data.totalCount
        pageForm.currentPage = res.data.currPage
        pageForm.pageSize = res.data.pageSize
    })
}

// 点击搜索
const onSearch = () => {
//   console.log(pageSearch)
    initData()
}
// 获取详细信息
function getInfo(row){
    dialogInfoVisible.value = true
    console.log(row)
    addEditForm = computed(()=>{
        return {
            id: row.id,
            manufacturer: row.manufacturer,
            name: row.name,
            description: row.description,
            mobile : row.mobile,
            place: row.place,
            remark: row.remark,
            panduan: row.panduan
        }
    })
}

const handleSizeChange = (val) => {
  // console.log(`${val} items per page`)
  initData()
}
const handleCurrentChange = (val) => {
  // console.log(`current page: ${val}`)
  initData()
}
// 删除
function delMore(){
    if(idArr.length == 0){
        ElMessage.error("请选择")
        return
    }
    console.log(idArr)
    del(idArr).then(res=>{
        if(res.code == 200){
            ElMessage.success("删除成功")
        }else{
            ElMessage.error(res.msg)
        }
    })
    initData()
}
// 进行添加
function addOne(n){
    console.log(n)
    dialogFormVisible.value = true
    if(n == 0){
        console.log("进行添加")
        addEditForm = reactive({
            id:"",
            manufacturer: "",
            name: "",
            description: "",
            mobile : "",
            place: "",
            remark: "",
            panduan: "1"
        })
    }else{
        console.log("进行编辑")
        addEditForm = reactive({
                id: n.id,
                manufacturer: n.manufacturer,
                place: n.place,
                name: n.name,
                mobile: n.mobile,
                remark: n.remark,
                panduan: n.panduan
            })
    }
}

// 确定
function addEdit(){
    if(addEditForm.id == ""){
        add(addEditForm).then(res=>{
            if(res.code == 200){
                ElMessage.success("添加成功")
                initData()
            }else{
                ElMessage.error(res.msg)
            }
        })
    }else{
        edit(addEditForm).then(res=>{
            if(res.code == 200){
                ElMessage.success("编辑成功")
                initData()
            }else{
                ElMessage.error(res.msg)
            }
        })
    }
    dialogFormVisible.value = false
    // console.log("点击了确定")
    // console.log(addEditForm)
    // ElMessage.success("添加成功")
}
</script>

<style scoped>

</style>